<template>
  <el-dialog
    :title="formData.comment"
    :visible="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    width="1000px"
    center
  >
    <el-form ref="addEditForm" v-loading="isLoading > 0" label-width="100px" class="add-edit-form">
      <el-form-item v-if="formData.c_key === 'vip_days'">
        <el-button type="primary" @click="addVipItem()">添加</el-button>
        <ul class="vip-box">
          <li v-for="(item, i) in configVip" :key="i">
            <span class="label">天数：</span>
            <el-input v-model="item.value" class="input" />
            <span class="label">天</span>
            <span class="label" style="padding-left: 100px;">原价：</span>
            <el-input v-model="item.price" class="input" />
            <span class="label">元</span>
            <span class="label" style="padding-left: 100px;">折后价：</span>
            <el-input v-model="item.discount_price" class="input" />
            <i class="icon el-icon-remove" @click="removeVipItem()" />
          </li>
        </ul>
      </el-form-item>
      <el-form-item v-if="formData.c_key === 'vip_times'">
        <el-button type="primary" @click="addVipItem()">添加</el-button>
        <ul class="vip-box">
          <li v-for="(item, i) in configVip" :key="i">
            <span class="label">次数：</span>
            <el-input v-model="item.value" class="input" />
            <span class="label">次</span>
            <span class="label" style="padding-left: 100px;">原价：</span>
            <el-input v-model="item.price" class="input" />
            <span class="label">元</span>
            <span class="label" style="padding-left: 100px;">折后价：</span>
            <el-input v-model="item.discount_price" class="input" />
            <i class="icon el-icon-remove" @click="removeVipItem()" />
          </li>
        </ul>
      </el-form-item>

      <el-form-item class="submit-box">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import lodash from 'lodash'
import { updateOneConfig } from '@/api/config'
let formData = null
export default {
  name: 'AddEditVip',
  components: {
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      isLoading: 0,
      formData: {},
      configVip: []
    }
  },
  computed: {},
  watch: {
    formData: {
      deep: true,
      handler(newVal) {
        if (newVal.c_value) {
          const arr = JSON.parse(newVal.c_value)
          arr.forEach(item => {
            item.price = item.price / 100
            item.discount_price = item.discount_price / 100
          })
          this.configVip = arr
        } else {
          return []
        }
      }
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    removeVipItem(i) {
      this.configVip.splice(i, 1)
    },
    addVipItem() {
      this.configVip.push({ value: null, price: null, discount_price: null })
    },
    handleClose() {
      this.dialogVisible = false
    },
    open(row) {
      this.dialogVisible = true
      formData = lodash.cloneDeep(row)
      this.resetForm()
    },
    resetForm() {
      this.formData = lodash.cloneDeep(formData)
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },
    async submitForm() {
      if (this.isLoading > 0) return
      try {
        this.isLoading++
        const arr = this.configVip.map(item => {
          return {
            value: item.value,
            price: Number.parseInt(item.price * 100),
            discount_price: Number.parseInt(item.discount_price * 100)
          }
        })
        this.formData.c_value = JSON.stringify(arr)
        await updateOneConfig(this.formData)
        this.$emit('refresh')
        this.handleClose()
      } finally {
        this.isLoading--
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.submit-box {
  display: flex;
  justify-content: flex-end;
}

.vip-box {
  li {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  .input {
    margin: 0 10px;
  }
  .label {
    flex: none;
  }
  .icon {
    cursor: pointer;
    font-size: 30px;
    color: #409eff;
  }
}
</style>
